import React, {useEffect, useState} from 'react';
import {PageContainer, ProCard} from "@ant-design/pro-components";
import {Button, Col, message, Row, Statistic} from "antd";
import CountUp from 'react-countup';
import {CheckCard} from "@ant-design/pro-card";
import KunBi from "@/pages/ShoppingCentre/components/KunBi";
import {getLoginUserUsingGet} from "@/services/ant-design-pro/userController";
import {history} from "@@/core/history";
const loginPath = '/user/login';
const ShoppingCentre = () => {
const [currentData,setCurrentData] = useState<number>(0)
  // 判断用户是否登录,未登录直接跳转至登录页
  const status: InitialState = {
    loginUser: undefined,
  };
  const getCurrentUser = async () => {
    try {
      const res = await getLoginUserUsingGet({
        skipErrorHandler: true,
      });
      status.loginUser = res.data
      console.log(status.loginUser)
    } catch (error) {
      message.error("未登录，请先登录")
      history.push(loginPath);
    }
    return status;
  }
  useEffect(() => {
    getCurrentUser()
  }, []);
  const formatter = (value: any) => <CountUp end={value} separator="," />;
  const handleChange = (value:any) => {
    setCurrentData(value)

  }
  // 提交
  const handleSubmit = () => {


  }
  return (
    <PageContainer
      content="欢迎来到坤币商城，请选择您需要的商品!"
      key='ShoppingCentre'
      extra={[
            <Statistic title="坤币余额"  value={50} key="kunbi" precision={2}  valueStyle={{
              color: '#1890ff',
            }} formatter={formatter} />
      ]}
    >
      <ProCard
        title="坤币套餐🪙"
        bordered
        key="kunbiyaocan"
        extra={[

        ]}
        actions={[
          <>
            本商品为虚拟内容,用于平台接口调用。确认支付表示您已阅读并接受 <a >用户协议</a> ，请仔细阅读后再购买
            如果有任何问题,可以通过下方的联系方式联系作者
          </>
        ]}
        type="inner"
        tooltip="坤币将用于接口调用"
        boxShadow
      >
        <CheckCard.Group style={{ width: '100%' }} onChange={(value)=>handleChange(value)}>
          <Row>
            <Col span={6}  key="card-a">
              <CheckCard
                title="Card A"
                key="card-a"
                description="This is the description"
                value={0.01}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
            <Col span={6}   key="card-b">
              <CheckCard
                title="Card B"
                key="card-b"
                description="This is the description"
                value={0.1}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
            <Col span={6}   key="card-c">
              <CheckCard
                title="Card C"
                key="card-c"
                description="This is the description"
                value={1}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
            <Col span={6}   key="card-d">
              <CheckCard
                title="Card D"
                key="card-d"
                description="This is the description"
                value={5.9}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
            <Col span={6}  key="card-e">
              <CheckCard
                title="Card E"
                key="card-e"
                description="This is the description"
                value={8.8}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
            <Col span={6} key="card-f">
            <CheckCard
              title="Card F"
              key="card-f"
              description="This is the description"
              value={9.9}>
              <KunBi></KunBi>
            </CheckCard>
          </Col>
            <Col span={6}  key="card-g">
              <CheckCard
                title="Card G"
                key="card-g"
                description="This is the description"
                value={18.8}>
                <KunBi></KunBi>
              </CheckCard>

            </Col>
            <Col span={6}   key="card-h">
              <CheckCard
                title="Card H"
                key="card-h"
                description="This is the description"
                value={64.8}>
                <KunBi></KunBi>
              </CheckCard>
            </Col>
          </Row>
        </CheckCard.Group>

      </ProCard>
      <ProCard
        key="submitting"
        style={{ marginTop:10 }}
        actions={[
          <>
            <Statistic title="当前一共需支付(元)" key="pay" value={currentData} precision={2} />
            <Button key="submit"
                    type="primary"
                    shape="round"
                    size={"large"}
                    style={{marginRight:20}}
                    onClick={()=>handleSubmit()
            }>立即购买💰</Button>
          </>
        ]}
        boxShadow
      >
      </ProCard>

    </PageContainer>
  );
};

export default ShoppingCentre;
